<template>
	<!--弹层 选择收货地址-->
	<view class="address_box" v-show="showAddress">
		<view class="mask" @click="hideMask"></view>
		<view class="address_scroll">
			<view class="scoll_top">
				<view class="cancel_address main-color-font" @click="hideMask">
					<view :style="mainColorFont"><lang keywords="取消" chineseTxt="取消"></lang></view>
				</view>
				<lang class="my_shouaddress" keywords="我的收货地址" chineseTxt="我的收货地址"></lang>
			</view>
			<view class="list-box">
				<view :class="'address_list ' + (addressId != '-1' ? 'active' : '')" v-for="(item, index) in addressList" :key="index" @click="useAddress(index)">
					<view class="select_address">
						<text class="icon iconfont icon-gou" :style="mainColorFont" v-if="(index == 0 && !addressId) || item.adress_id == addressId"></text>
					</view>
					<view class="address_detail">
						<view class="two">
							<text class="address_name">{{ item.name }}</text>
							<text class="address_phone">{{ item.phone }}</text>
						</view>
						<view class="details_mess">{{ item.show_address }}</view>
						<view class="not-delivery" v-show="!item.is_deliver">
							<lang keywords="此地址不在配送范围内（距离X1km）" X1="item.distance" :chineseTxt="'此地址不在配送范围内（距离' + item.distance + 'km）'"></lang>
						</view>
					</view>
					<text class="edit_address icon iconfont icon-bianji" @click.stop="editAddress(item.adress_id)"></text>
				</view>
			</view>
			<view class="add_address main-color-font" :style="mainColorFont" @click="editAddress()">
				<text class="icon iconfont icon-jia"></text>
				<lang keywords="新增收货地址" chineseTxt="新增收货地址"></lang>
			</view>
		</view>
	</view>
</template>

<script>
import common from '../../utils/common.js';
var _this = '';
var app = getApp();
export default {
	data() {
		return {
			addressList: [],
			showAddress: false,
			mainColorFont: ''
		};
	},
	props: ['showMask', 'addressId', 'storeId', 'needRefresh'],
	watch: {
		showMask: {
			immediate: true,
			handler: function(val) {
				console.log('111111111111showMask', val);
				this.showAddress = val;
				if (val) {
					console.log('获取地址列表showAddress');
					this.getAddressList();
				}
			}
		},
		needRefresh: {
			immediate: true,
			handler: function(val) {
				if (val) {
					console.log('获取地址列表needRefresh');
					this.getAddressList();
				}
			}
		}
	},
	mounted() {
		console.log('注册地址选择组件');
		_this = this;
		common.getConfig(function(data){
			_this.mainColorFont = `color:${data.config.mobile_head_color} !important`
		})
	},
	methods: {
		editAddress(addressId) {
			let url = '/pages/my/address_add';
			if (addressId) {
				url = url + '?address_id=' + addressId;
			}
			this.$emit('addressHandle', { add: true });
			uni.navigateTo({
				url: url
			});
		},
		useAddress(index) {
			if (!this.addressList[index].is_deliver) {
				return
			}
			this.$emit('addressHandle', { select: this.addressList[index] });
		},
		// 关闭弹窗
		hideMask() {
			console.log('111111111111')
			this.$emit('addressHandle', { close: true });
		},
		// 获取地址列表
		getAddressList() {
			var param = {};
			if (this.storeId) {
				param.store_id = this.storeId;
			}
			common.post('My&a=adress', param, function(data) {
				if (data && data.length > 0) {
					_this.addressList = data;
				} else {
					_this.addressList = []
				}
			});
		}
	}
};
</script>

<style lang="stylus" scoped>
.address_box
	font-size 14px
	.mask
		position fixed
		left 0
		bottom 0
		right 0
		top 0
		z-index 111112
		background rgba(0, 0, 0, 0.7)
	.address_scroll
		position fixed
		height 70%
		background white
		left 0
		bottom 0
		width 100%
		z-index 111113
		.scoll_top
			font-size 14px
			width 100%
			height 50px
			border-bottom 1PX solid #eee
			line-height 50px
			.cancel_address
				color #06C1AE
				display inline-block
				height 50px
				width 10%
				padding-left 3%
			.my_shouaddress
				display inline-block
				width 50%
				position absolute
				left 25%
				right 25%
				text-align center
		.list-box
			height -webkit-calc(100% - 100px)
			height calc(100% - 100px)
			overflow-y auto
			.address_list
				border-bottom 1PX solid #eee
				position relative
				display flex
				padding 15px 0
				align-items center
				&:last-child
					border-bottom none
				.edit_address
					padding 15px
				.address_detail
					flex-grow 1
					position relative
				.two
					display flex
					justify-content space-between
					align-items center
					vertical-align middle
					color #999
					margin-bottom 5px
				.details_mess
					line-height 1.2
				.select_address
					width 45px
					text-align center
					.icon
						font-size 18px
				.not-delivery
					color red
					font-size 12px
					margin-top 5px
		.add_address
			height 50px
			width 100%
			border-top 1PX solid #eee
			color #06C1AE
			display flex
			justify-content center
			align-items center
			.icon
				font-size 18px
				margin-right 5px
</style>
